<template>
	<view class="content">
		<map 
			:latitude="latitude" 
			:longitude="longitude" 
			:scale="14" 
			:polyline="polyline"
			:markers="markers"
			:enable-traffic="traffic"
		></map>
		<view class="detail">
			<view class="row">
				<view class="col-7 security_title">
					<view class="row">
						<view class="col-8 t_center">
							<image src="../../static/index/security.png" mode="heightFix"></image>
						</view>
						<view class="col-16 t_left t_size_26">
							安全中心
						</view>
					</view>
				</view>
			</view>
			<view class="row this_content">
				<view class="col-22 pdl-1 pdr-1">
					<view class="row price">
						<view class="col-12">
							<view class="row">
								<view class="col-24 pay_price t_size_bold">
									18.00 <text class="t_size_26"> 元</text>
								</view>
								<view class="col-24 yh_price t_size_31">
									已优惠<text> 7 </text>元
								</view>
							</view>
						</view>
						<view class="col-12">
							<view class="row price_mx" @click="$public.navTo('trip/trip_pay_definite')">
								费用明细
								<image src="../../static/trip/yjt@2x.png" mode="heightFix"></image>
							</view>
						</view>
					</view>
					<view class="row driver">
						<view class="col-5 img t_center">
							<view class="head_img">
								<image src="../../static/trip/dh@2x.png" mode="scaleToFill"></image>
							</view>
							<view class="head_name">
								胡师傅
							</view>
						</view>
						<view class="col-12 off-2">
							<view class="row d_content">
								<view class="col-24 license">
									粤A·77777
								</view>
								<view class="model">
									黑色|劳斯莱斯幻影
								</view>
								<view class="row score">
									<view>
										<uni-rate :isFill="true" :value="4.5" :readonly="true"></uni-rate>
									</view>
									<view class="off-1">
										4.5分
									</view>
								</view>
							</view>
						</view>
						<view class="col-5 t_right phone">
							<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="evaluate row">
						<view class="col-24">
							<view class="row ev_title">
								<view class="col-4 set-1">
									
								</view>
								<view class="t_size_bold t_size_34">
									评价该服务
								</view>
								<view class="col-4 off-1">
									
								</view>
							</view>
							<view class="row ev_score">
								<uni-rate :isFill="true" :size="35" :margin="10" :allowHalf="true" :value="0" :readonly="false"></uni-rate>
							</view>
							<view class="row ev_ni">
								<view class="col-24 t_center t_size_26">
									匿名评价
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="row tab_btn">
				<view class="col-8">
					<button type="warn" @click="$public.navTo('public/security2')">一键报警</button>
				</view>
				<view class="col-14 off-2">
					<button type="primary" @click="mask_pay=1">立即支付</button>
				</view>
			</view>
		</view>
		<view :class="mask_pay==1?'mask':'mask_pay'">
			<view class="pay_model">
				<view class="model_title row">
					<view class="col-21 t_center t_size_32">
						立即支付
					</view>
					<view class="col-3 img_close t_right">
						<image src="../../static/index/close_icon.png" mode="heightFix" @click="mask_pay=0"></image>
					</view>
				</view>
				<view class="model_price row">
					<view class="col-24 p_title t_size_bold t_center">
						订单金额（元）
					</view>
					<view class="col-24 p_number t_size_bold t_size_32 t_center">
						8.00
					</view>
					<view class="col-24 p_desc t_size_26 t_center">
						费用疑问
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="model_detailed row">
					<view class="col-24 tailed_title t_size_bold t_size_28">
						费用明细
					</view>
					<view class="col-12 t_size_28">
						费用
					</view>
					<view class="col-12 t_right t_size_28">
						18.00元
					</view>
					<view class="col-12 t_size_28">
						优惠券
					</view>
					<view class="col-12 t_size_28 t_right m_coupon">
						10.00元
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="model_paybtn row">
					<view class="col-22 off-1 set-1">
						<button type="primary" class="t_size_31">确认支付8.00元</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js');
	var qqmask;
	import uni_rate from '@/components/uni-rate/uni-rate.vue'
	import {mapState} from 'vuex';
	export default {
		computed:mapState(['traffic']),
		components:{
			"uni-rate": uni_rate
		},
		data() {
			return {
				polyline: [{
					width: 11,
					color:'#CCCDCF',
					arrowLine: true,
					points: []
				}],
				markers:[],
				latitude: 0,
				longitude: 0,
				
				mask_pay: 0
			}
		},
		onLoad(option) {
			qqmask = new QQMapWX({
				key: 'FFJBZ-32W6O-ZTPWU-S6G2B-AJB3Z-DKBV7'
			})
			this.cover_load()
		},
		methods: {
			cover_load(){
				let that = this;
				qqmask.direction({
					mode: 'driving',
					from: {
						latitude: 40.020531685762414,
						longitude: 116.47106409662092
					},
					to: {
						latitude: 40.0067553292041,
						longitude: 116.47899747913948
					},
					success(res) {
						let arr = res.result.routes[0].polyline;
						for (var i = 2; i < arr.length ; i++){
							arr[i] = arr[i-2] + arr[i]/1000000;
							if(i % 2 == 0){
								let obj = {
									latitude: arr[i],
									longitude: arr[i-1]
								}
								that.polyline[0].points.push(obj)
							}
						};
						// 以终点为中心点画地图
						that.latitude = that.polyline[0].points[that.polyline[0].points.length-1].latitude;
						that.longitude = that.polyline[0].points[that.polyline[0].points.length-1].longitude;
						//添加起点和终点标记
						that.markers.push({
							latitude: that.polyline[0].points[that.polyline[0].points.length-1].latitude,
							longitude: that.polyline[0].points[that.polyline[0].points.length-1].longitude,
							iconPath: '../../static/public/zd@2x.png',
							width: 40,
							height: 56
						});
						that.markers.push({
							latitude: that.polyline[0].points[0].latitude,
							longitude: that.polyline[0].points[0].longitude,
							iconPath: '../../static/public/qd@2x.png',
							width: 40,
							height: 56
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;

		map {
			width: 100%;
			height: 75%;
		}

		.detail{
			width: 90%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 5%;
			z-index: 7;
			.security_title{
				background-color: #FFFFFF;
				border-radius: 32rpx;
				height: 64rpx;
				line-height: 64rpx;
				margin-bottom: 25rpx;
				.t_center{
					margin-top: 12rpx;
					height: 40rpx;
					image{
						height: 100%;
					}
				}
				.t_left{
					color: #333333;
				}
			}
			.this_content{
				box-shadow: 0px 15rpx 20rpx 0px #EDEDED;
				border-radius: 11rpx;
				background-color: #FFFFFF;
				padding: 35rpx 0;
				margin-bottom: 41rpx;
				.price{
					height: 125rpx;
					padding: 15rpx 0;
					.pay_price{
						height: 80rpx;
						line-height: 80rpx;
						color: #FF2626;
						font-size: 41rpx;
						text{
							font-weight: 500;
							color: #999999;
							margin: 0 9rpx;
						}
					}
					.yh_price{
						height: 55rpx;
						line-height: 50rpx;
						color: #333333;
						text{
							color: #FF2626;
							font-weight: bold;
							margin: 0 9rpx;
						}
					}
					.price_mx{
						height: 29rpx;
						line-height: 29rpx;
						padding: 63rpx 0;
						justify-content: flex-end;
						color: #999999;
						image{
							height: 29rpx;
							margin-left: 11rpx;
						}
					}
				}
				
				.driver{
					height: 150rpx;
					padding: 25rpx 0;
					border-top: 1px solid #f5f5f5;
					border-bottom: 1px solid #f5f5f5;
					.img{
						height: 150rpx;
						position: relative;
						.head_img{
							width: 100%;
							height: 120rpx;
							image{
								margin-top: 15rpx;
								width: 120rpx;
								height: 100%;
							}
						}
						.head_name{
							width: 100%;
							position: absolute;
							bottom: 0;
							left: 0;
							color: #FFFFFF;
							background-color: #1A1A1A;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
						}
					}
				
					.d_content{
						height: 150rpx;
						.license{
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							font-weight: bold;
							color: #333333;
						}
						.model{
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
							color: #999999;
						}
						.score{
							height: 50rpx;
							align-items: center;
							.off-1{
								color: #FFAE00;
							}
						}
					}
					
					.phone{
						image{
							height: 90rpx;
							margin-top: 30rpx;
						}
					}
				}
		
				.evaluate{
					.ev_title{
						height: 80rpx;
						line-height: 80rpx;
						justify-content: center;
						align-items: center;
						color: #333333;
						.col-4{
							height: 1px;
							background-color: #E6E6E6;
						}
					}
					.ev_score{
						height: 150rpx;
						align-items: center;
						justify-content: center;
					}
					.ev_ni{
						height: 50rpx;
						line-height: 50rpx;
						color: #999999;
					}
				}
			}
			.tab_btn{
				padding-bottom: 41rpx;
				button{
					height: 86rpx;
					line-height: 86rpx;
					border-radius: 43rpx;
					font-size: 29rpx;
				}
				button[type="warn"]{
					background-color: #FFFFFF;
					border: 1px solid #6CBF30;
					color: #6CBF30;
				}
				button[type="primary"]{
					background-color: #6CBF30;
				}
			}
		}
	}
	.mask,
	.mask_pay{
		width: 100vw;
		height: 100vh;
		position: fixed;
		background-color: rgba(0,0,0,0.4);
		top: 0;
		left: 0;
		z-index: 999;
		transition-duration: 0.2s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;
		.pay_model{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 92%;
			padding: 0 4%;
			background-color: #FFFFFF;
			border-radius: 29rpx 29rpx 0 0;
			.model_title{
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 1px solid #EDEDED;
				.t_center{
					text-indent: 3em;
					color: #333333;
				}
				.img_close{
					height: 96rpx;
					image{
						margin-top: 32rpx;
						height: 30rpx;
					}
				}
			}
			.model_price{
				border-bottom: 1px solid #e6e6e6;
				.p_title{
					height: 90rpx;
					line-height: 90rpx;
					color: #333333;
				}
				.p_number{
					color: #FF2626;
					height: 40rpx;
					line-height: 40rpx;
				}
				.p_desc{
					height: 80rpx;
					line-height: 80rpx;
					color: #999999;
					text{
						margin-left: 15rpx;
					}
				}
			}
			.model_detailed{
				padding: 20rpx 0;
				border-bottom: 1px solid #e6e6e6;
				line-height: 60rpx;
				color: #333333;
				.m_coupon{
					color: #6CBF30;
					text{
						margin-left: 11rpx;
					}
				}
			}
			.model_paybtn{
				height: 126rpx;
				line-height: 126rpx;
				button{
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 40rpx;
					margin-top: 23rpx;
					background-color: #6CBF30;
				}
			}
		}
	}
	.mask_pay{
		top: 110vh;
	}
</style>
